<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >添加部门信息</el-button
    >

    <el-dialog
      title="管理部门信息"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="部门编号">
          <el-input v-model="formLabelAlign.id"></el-input>
        </el-form-item>

        <el-form-item label="部门名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" round @click="add">添加</el-button>
      <el-button type="primary" round @click="update">修改</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SetDepar",
  data() {
    return {
      dialogVisible: false,
      labelPosition: "left",
      formLabelAlign: {
        id:'',
        name: "",
      },
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {},

  methods: {
    add() {
      this.$axios
        .post("/users/department1/", { name: this.formLabelAlign.name })
        .then((result) => {
          console.log(result);
          alert("添加成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    update() {
      this.$axios
        .PUT("/users/department"+this.formLabelAlign.id+'/', {id:this.formLabelAlign.id, name: this.formLabelAlign.name })
        .then((result) => {
          console.log(result);
          alert("修改成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
* {
  margin: 0;
}

.addDepar {
  height: 600px;
}
</style>
